<template lang="pug">
div(class="snow")
  - for (let x = 0; x < 180; x++)
  div(class='item')
</template>

<script setup>

</script>

<style lang="scss" scoped>

.snow {
  height: 100%;
  background-color: #2a3749;
}

@for $i from 1 through 180 {
  .item:nth-child(#{$i}) {
    $size: #{random(4) + 4}px;
    position: absolute;
    top: -10px;
    left: #{random(100)}vw;
    width: $size;
    height: $size;
    border-radius: $size;
    background-color: #cccccc;
    animation: down-#{$i};
    animation-duration: #{random(10) + 6}s;
    animation-delay: #{random(10)}s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    box-shadow: 0 0 4px 0 #cccccc;
  }

  @keyframes down-#{$i} {
    0% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(#{random(200) - 100}px, 50vh);
    }
    100% {
      transform: translate(#{random(200) - 100}px, 101vh);
    }
  }
}

</style>